<template>
	<div class="my">
		<div class="container">
			<img src="../../src/assets/images/my/my@bg.png" class="bg" alt="">
			<div class="avatar-position">
				<img src="../../src/assets/images/my/my.png" class="avatar" alt="">
			</div>
			<div class="about-container">
				<div class="about-us">
					<img src="../../src/assets/images/my/about.png" alt="">
					<div class="description">关于我们</div>
				</div>
				<div class="about-us">
					<div class="book-num">{{bookCount}}</div>
					<div class="description">喜欢的书</div>
				</div>
			</div>
			<div class="like-container">
				<img class="headline" src="../assets/images/my/like.png" alt="">
				<div class="preview-container">
					<vPreview v-for="(item,index) of classics" :key="index" class="preview" :classic="item"></vPreview>
				</div>
			</div>
		</div>
		<Tab></Tab>
	</div>
</template>

<script>
//预设data不能为null，会报错
//组件@click，要触发原生事件要加@click.native
import Tab from '../components/tab/tab.vue'
import vPreview from '../components/preview/preview.vue'
import {BookModel} from '../models/book.js'
import {ClassicModel} from '../models/classic.js'
let classicModel=new ClassicModel()
let bookModel=new BookModel()
export default{
	name:'myPage',
	data(){
		return{
			bookCount:0,
			classics:{}
		}
	},
	components:{
		Tab,vPreview
	},
	created(){
		bookModel.getMyBookCount().then(res=>{
			this.bookCount=res.data.count
		})
		classicModel.getMyFavor().then(res=>{
			this.classics=res.data
		})
	},
	methods:{

	}	

}
</script>
<style lang="stylus" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg {
    width:100%;
    height:288px;
}

.avatar-position {
    position: absolute;
    top:128px;
}

.my-img {
    width:60px;
    height:60px;
}

.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    width:60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
}

.about-container {
    padding: 0 50px;
    width: 275px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    top: 220px;
}

.about-us img {
    width: 17px;
    height:17px;
}

.preview-container {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding:0 15px;
    flex-wrap:wrap;
    justify-content: space-between;
}

.preview {
    margin-bottom: 15px;
}

.about-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.book-num {
    font-size: 18px;
    color: #000000;
}

.description {
    font-size: 12px;
    color: #999999;margin-top:5px;
}

.about-container>view:nth-child(2) {
    margin-top: -3px;
}

.like-container {
    /* margin-top:30rpx; */
    margin-top: -7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;width:100%;padding:0 20px;box-sizing:border-box;margin-bottom:50px;
}

.headline {
    margin-top: 15px;
    width: 49px;
    height: 21px;
}

.study {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 20px;
    right: 23px;
}
</style>